import {
  C44InvoiceListItem,
  Layout,
  UserSubPageBase,
  C13BottomDock,
  Icon,
  KeyValueList,
} from "@/components";
import { useState } from "react";
import { useDidShow, useRouter } from "@tarojs/taro";
import { getInvoiceDetails } from "@/store/userDataContext";
import {
  ApiInvoiceType,
  generateInvoiceStatusText,
  InvoiceDetailShape,
} from "@/data/invoice/invoiceTypes";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import style from "./index.module.scss";
import { useAuth } from "@/store/authContext";

export default function UserInvoiceSelect() {
  const [invoiceDetails, setInvoiceDetails] =
    useState<InvoiceDetailShape | null>(null);
  const { dispatchAuthAction } = useAuth();

  const { id } = useRouter().params;

  useDidShow(async () => {
    if (id) {
      setInvoiceDetails(
        await getInvoiceDetails({
          query: { invoiceId: id },
          authDispatch: dispatchAuthAction,
        })
      );
    }
  });

  const showPdf = () => {
    if (invoiceDetails) {
      Taro.downloadFile({
        url: invoiceDetails.url,
        success: function (res) {
          var filePath = res.tempFilePath;
          Taro.openDocument({
            filePath: filePath,
            showMenu: true,
            fileType: "pdf",
          });
        },
      });
    }
  };

  return (
    <Layout>
      {invoiceDetails && (
        <>
          <UserSubPageBase
            title={generateInvoiceStatusText(invoiceDetails.status)}
            scrollable
          >
            <View className={style["invoice-details-wrapper"]}>
              <>
                <View className={style["top-row"]} onClick={showPdf}>
                  <View className={style["title-text"]}>查看电子发票</View>
                  <Icon type="ArrowBlack" className={style.arrow} />
                </View>

                <View
                  className={`${style["title-text"]} ${style["value-list-title"]}`}
                >
                  开票详情
                </View>

                <KeyValueList
                  itemList={[
                    ...(invoiceDetails.type === ApiInvoiceType.Company
                      ? [
                          {
                            leftText: "公司名称",
                            middleTextTop: invoiceDetails.corporateName,
                          },
                          {
                            leftText: "公司税号",
                            middleTextTop: invoiceDetails.companyTaxNumber,
                          },
                        ]
                      : [
                          {
                            leftText: "姓名",
                            middleTextTop: invoiceDetails.name,
                          },
                        ]),

                    {
                      leftText: "发票金额",
                      middleTextTop: `${invoiceDetails.price}元`,
                    },
                    {
                      leftText: "申请时间",
                      middleTextTop: `${invoiceDetails.createTime}`,
                    },
                  ]}
                />

                {invoiceDetails.orderList.map((order) => (
                  <C44InvoiceListItem
                    key={order.orderNo}
                    orderNo={order.orderNo}
                    payTime={order.payTime}
                    name={order.name}
                    payPrice={order.payPrice}
                  />
                ))}
              </>
            </View>
          </UserSubPageBase>

          <View className={style["dock-wrapper"]}>
            <C13BottomDock
              onPrimaryClick={{
                text: "查看并下载发票",
                cb: showPdf,
              }}
              onSecondaryClick={null}
            />
          </View>
        </>
      )}
    </Layout>
  );
}
